<template>
	<picker @change="bindPickerChange" :value="index" :range="list.map(x=>x.name)" style="width: 100%;">
		<view class="placeHolder" v-if="index<0">
			{{placeHolder}}
		</view>
		<view style="width:100%" v-else>{{list[index].name }}</view>
	</picker>
</template>

<script>
	export default {
		name: 'single-picker',
		props: {
			value: {
				type: [String, Number],
				default: null
			},
			// [{ name: '选项1', id: '1'}] 
			list: {
				type: Array,
				default: () => []
			},
			placeHolder: {
				type: String,
				default: '请选择'
			}
		},
		watch: {
			value(newVal) {
				this.index = this.list.findIndex(x => x.id === newVal)
				console.log('newVal', newVal, this.index)
				console.log(this.list)
			}
		},
		data() {
			return {
				index: -1
			}
		},
		methods: {
			bindPickerChange(e) {
				console.log(e)
				this.index = e.detail.value
				if (this.index == -1) {
					this.$emit('input', null)
				} else {
					let picked = this.list[this.index].id
					this.$emit('input', picked)
				}

			}
		}
	}
</script>

<style scoped>
	.placeHolder {
		color: #999999;
	}
</style>
